<template>
  <div class="ol-detail">
    <van-cell-group>
      <van-field
        v-model="feature.describe"
        label="功能描述"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="feature.analyze"
        label="需求分析（人天）"
        label-width="8.2em"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="feature.config"
        label="系统配置（人天）"
        label-width="8.2em"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="feature.design"
        label="系统设计（人天）"
        label-width="8.2em"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="feature.developer"
        label="系统开发（人天）"
        label-width="8.2em"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="feature.test"
        label="系统测试（人天）"
        label-width="8.2em"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="feature.project"
        label="项目管理（人天）"
        label-width="8.2em"
        input-align="right"
        placeholder="请输入"
      />
    </van-cell-group>
    <div class="form-btn">
      <div @click="del" class="btn btn-color1">删除</div>
      <div @click="save" class="btn btn-color3">保存</div>
    </div>
    <goback></goback>
  </div>
</template>
<script>
import { estimateWork,estimateSave } from "@/api/service.js";
import { Toast } from "vant";
import Goback from '@/components/goback.vue';
export default {
  components: {
    Goback
  },
  data() {
    return {
      feature:'',
      server_id:'',
      implement_comment_id:'',
      system_id:'',
      function_name:'',
      assess_id:'',
    }
  },
  mounted(){
    this.server_id = this.$route.query.server_id;
    this.implement_comment_id = this.$route.query.implement_comment_id;
    this.system_id = this.$route.query.system_id;
    this.function_name = this.$route.query.function_name;
    this.assess_id = this.$route.query.assess_id;
    this.getData();
  },
  methods: {
    getData() {
      estimateWork({
        server_id: this.server_id,
        implement_content_id: this.implement_comment_id,
        system_id: this.system_id,
        function_name: this.function_name,
      }).then((res) => {
        console.log(res);
        if(res.status == 'success'){
          console.log(res.data)
          if(res.data[0]){
            this.feature = res.data[0]
          }else{
            this.feature = {
              describe:'',
              analyze:'',
              config:'',
              design:'',
              developer:'',
              test:'',
              project:''
            }
          }
          
        }
      });
    },
    del(){
      this.feature = {
        describe:'',
        analyze:'',
        config:'',
        design:'',
        developer:'',
        test:'',
        project:''
      }
      localStorage.removeItem("resData");
    },
    save(){
      console.log(this.feature)
      let data = this.feature;
      estimateSave({
        describe:data.describe,
        analyze:data.analyze,
        config:data.config,
        design:data.design,
        developer:data.developer,
        test:data.test,
        project:data.project,
        server_id:this.server_id,
        assess_id:this.assess_id,
        implement_content_id:this.implement_comment_id,
        system_id:this.system_id,
        price:23,
        estimate_id:this.feature.id,
        function_name:this.function_name
      }).then((res)=>{
        console.log(res)
        Toast(res.message)
        if(res.status){
          console.log(res.data)
          localStorage.setItem('resData', JSON.stringify(res.data))
          this.$router.back()
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.ol-detail {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #F7F9F9;
  box-sizing: border-box;
  .form-box {
    background: #fff;
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      background: #EBEDF0;
      color: #011445;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
}
</style>